<template>
  <div class="app-container">
    <el-card class="box-card" >
      <div slot="header" class="clearfix">
        <span class="el-icon-document">事项列表</span>
      </div>
      <el-row>
        <el-col :span="3" v-for="(item, index) in appList" :key="index" :offset="(index > 0 && index%6 > 0) ? 1 : 0">
            <el-card :body-style="{ padding: '0px'}" style="margin-bottom: 20px;">
              <router-link :to="{ path: '/inst/start', query:{appId:item.appId} }">
                <p class="app-title">{{item.appName}}</p>
                <div style="padding: 14px;display: flex">
                  <div class="left"><image-preview :oss-id="item.logo" :is-preview="false" /></div>
                  <div class="right">
<!--                    <p>开始时间：{{ item.startTime }}</p>-->
<!--                    <p>结束时间：{{ item.endTime }}</p>-->
                  </div>
                </div>
              </router-link>
            </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import { listApp } from '@/api/flowable/front';
export default{
    name:'AppList',
    data () {
        return {
          appList:[],
          currentDate: new Date()
        }
    },
    created(){
      this.listApp();
    },
    methods:{
      listApp(){
        listApp().then(res=>{
          this.appList = res.data;
        })
      }
    }
}
</script>
<style scoped>
.box-card{
  margin-bottom: 10px;
  width:87vw
}
.app-title{
  padding-left: 16px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #2461a2;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}
.left{
  width: 50px;
  height: 50px;
  -webkit-box-flex: 0;
  flex: none;
}
.left > img {
  width: 100%;
  height: 100%;
}
.right{
  margin-left: 16px;
}
.right >p{
  margin: 2px;
  font-size: 12px;
  font-weight: 400;
  color: #8e8e8e;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
</style>
